@let user = user$ | async;
@let instances = instances$ | async;
@let environmentList = environmentList$ | async;
@let taskInProgress = taskInProgress$ | async;
@let payload = payload$ | async;
@let isCloudEnabled = isCloudEnabled$ | async;
@let deployEnvList = deployEnvList$ | async;
@let availableRegionsLabels = availableRegionsLabels$ | async;

<div class="modal-header align-items-center">
  <h3 class="modal-title">Manage your instances</h3>
  @if (payload?.environmentUuid) {
    <div class="ms-auto" [appHideAfter]="3000">
      <small class="text-success h6">
        <app-svg icon="check" class="me-2"></app-svg>Instance deployed
        successfully!
      </small>
    </div>
  }
</div>

<div class="modal-body p-0">
  <table class="table align-middle mb-0">
    <thead>
      <tr>
        <!-- align padding with modal body -->
        <th scope="col" class="ps-3">Status</th>
        <th scope="col">Name</th>
        <th scope="col">Region</th>
        <th scope="col">URL</th>
        <th scope="col">Visibility</th>
        <th scope="col">API key</th>
        <th scope="col"></th>
      </tr>
    </thead>
    <tbody>
      @if (isCloudEnabled) {
        @for (instance of instances; track $index) {
          <tr
            class="hover-parent"
            [ngClass]="{
              'animation-fast-highlight':
                payload?.environmentUuid === instance.environmentUuid
            }"
          >
            <!-- align padding with modal body -->
            <td class="ps-3">
              @if (instance.status === 'RUNNING') {
                <app-svg
                  icon="record"
                  class="text-success"
                  ngbTooltip="Running"
                ></app-svg>
              } @else {
                <app-svg
                  icon="record"
                  class="text-danger"
                  ngbTooltip="Stopped"
                ></app-svg>
              }
            </td>
            <td>
              @if (environmentList[instance.environmentUuid]) {
                <a
                  href=""
                  (click)="
                    navigateToEnvironment(instance.environmentUuid, $event)
                  "
                  >{{ instance.name }}</a
                >
              } @else {
                <span class="text-muted">{{ instance.name }}</span>
              }
            </td>
            <td>
              <span class="text-muted">{{
                availableRegionsLabels[instance.region]
              }}</span>
            </td>
            <td>
              <div class="d-flex align-items-center">
                <a href="{{ instance.url }}" target="_blank">{{
                  instance.url
                }}</a>
                <button
                  type="button"
                  class="btn btn-sm btn-link btn-icon p-0 ms-2"
                  ngbTooltip="Click to copy"
                  (click)="copyToClipboard(instance.url)"
                >
                  <app-svg icon="assignment"></app-svg>
                </button>
              </div>
            </td>
            <td>
              <div class="d-flex align-items-center">
                @if (instance.visibility === 'PUBLIC') {
                  <app-svg icon="public" class="me-2"></app-svg>Public
                } @else {
                  <app-svg icon="lock" class="me-2"></app-svg>Private
                }
              </div>
            </td>
            <td>
              <button
                type="button"
                class="btn btn-sm btn-link btn-icon p-0 ms-2"
                ngbTooltip="Click to copy the API key. The API key must be used in the Authorization header to access the API when private. The API key is always required to access the admin API."
                (click)="copyToClipboard(instance.apiKey)"
              >
                <app-svg icon="key"></app-svg>
              </button>
            </td>
            <td>
              <app-dropdown-menu
                [idPrefix]="'instances-' + instance.environmentUuid"
                [items]="instancesDropdownMenuItems"
                [payload]="{
                  environmentUuid: instance.environmentUuid
                }"
                [iconFaded]="true"
                [noYPadding]="true"
              ></app-dropdown-menu>
            </td>
          </tr>
        } @empty {
          <tr>
            <td colspan="6" class="text-center text-muted">
              <div class="d-flex align-items-center justify-content-center">
                <div class="me-2">No instances deployed.</div>
                @if (deployEnvList.length > 0) {
                  <app-dropdown-menu
                    class="col-3"
                    idPrefix="deploy-env-list"
                    [items]="deployEnvList"
                    [icon]="null"
                    label="Deploy environment"
                  ></app-dropdown-menu>
                }
              </div>

              @if (!isCloudEnabled) {}
            </td>
          </tr>
        }
      } @else {
        <tr>
          <td colspan="6" class="text-center text-muted">
            <a [href]="cloudPlansURL" target="_blank"
              >Subscribe to Mockoon Cloud</a
            >
            to deploy cloud environments.
          </td>
        </tr>
      }
    </tbody>
  </table>
</div>

<div class="modal-footer justify-content-space-between border-top-0">
  @if (user && user.plan !== 'FREE') {
    <div class="col-6 d-flex align-items-center">
      <p
        class="mb-0"
        [ngClass]="{
          'text-warning':
            user?.deployInstancesQuotaUsed >= user?.deployInstancesQuota
        }"
      >
        Quota used ({{ user?.deployInstancesQuotaUsed }}/{{
          user?.deployInstancesQuota
        }})
      </p>
      <a
        class="btn btn-link btn-icon text-primary ps-2"
        href="{{ accountUrl }}"
        target="_blank"
      >
        My account
        <app-svg icon="open_in_new" class="ps-1" size="12"></app-svg>
      </a>
    </div>
  }
  <div class="ms-auto d-flex align-items-center">
    @if (taskInProgress) {
      <div class="d-inline-block me-2">
        <app-spinner></app-spinner>
      </div>
    }
    <button
      type="button"
      class="btn btn-secondary modal-close ms-2"
      (click)="close()"
    >
      Close
    </button>
  </div>
</div>
